<title>反应性</title>

<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">反应性</h1>
        <div class="page-header-actions">
        </div>
    </div>
    #parse("/common/loading.html")
    <div class="page-content">
        <div class="row">
            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">二级配送中心点</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" >
                        #parse("/lpp/network/supply/response/map1.html")
                    </div>
                </div>
            </div>
            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">一级到二级的配送路线</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%">
                        #parse("/lpp/network/supply/response/map2.html")
                    </div>
                </div>
            </div>

            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">一级到各二级的距离</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" id="cost-bar-one">

                    </div>
                </div>
            </div>

            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">一级到二级的总距离</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" id="cost-bar-two">

                    </div>
                </div>
            </div>
            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">一级配送中心经济订货批量</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" id="cost-bar-three">

                    </div>
                </div>
            </div>
            <div class=" col-md-6">
                <div class="panel panel-bordered">
                    <div class="panel-heading">
                        <h3 class="panel-title">一级配送中心再订货点</h3>
                        <div class="panel-actions">

                        </div>
                    </div>
                    <div class="panel-body padding-3 height-250" style="width:100%" id="cost-bar-four">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/public/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script type="text/javascript">
    function initbarOne() {
        cost_bar_one.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '9%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '成本',
                    type: 'bar',
                    data: [],
                    barMaxWidth:30,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#12a9ac'
                            }, {
                                offset: 1,
                                color: '#d5e5e5'
                            }]),
                        },
                    }
                }
            ]
        });
    }

    function initbarTwo() {
        cost_bar_two.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '9%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '距离',
                    type: 'bar',
                    data: [],
                    barMaxWidth:30,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#46bd8a'
                            }, {
                                offset: 1,
                                color: '#ffffff'
                            }]),
                        },
                    }
                }
            ]
        });
    }

    function initbarThree() {
        cost_bar_three.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '9%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '车辆数目',
                    type: 'bar',
                    data: [],
                    barMaxWidth:30,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#46bd8a'
                            }, {
                                offset: 1,
                                color: '#f7fff3'
                            }]),
                        },
                    }
                }
            ]
        });
    }

    function initbarFour() {
        cost_bar_four.setOption({
            title: {
                text: '某地区蒸发量和降水量',
                subtext: '纯属虚构',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        show:true,
                        interval:0,
                        rotate:45,//倾斜度 -90 至 90 默认为0
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(value){
                            var var1=value*1;
                            return var1;
                        },
                        textStyle:{
                            color:"#595959"
                        }
                    },
                    splitLine:{
                        show:true
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                        }
                    },
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '9%',
                top:'5%',
                containLabel: true
            },
            series: [
                {
                    name: '车辆数目',
                    type: 'bar',
                    data: [],
                    barMaxWidth:30,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#46bd8a'
                            }, {
                                offset: 1,
                                color: '#f7fff3'
                            }]),
                        },
                    }
                }
            ]
        });
    }

    $(function () {
        window.cost_bar_one = echarts.init(document.getElementById('cost-bar-one'), 'macarons');
        window.cost_bar_two = echarts.init(document.getElementById('cost-bar-two'), 'macarons');
        window.cost_bar_three = echarts.init(document.getElementById('cost-bar-three'), 'macarons');
        window.cost_bar_four = echarts.init(document.getElementById('cost-bar-four'), 'macarons');
        initbarOne();
        initbarTwo();
        initbarThree();
        initbarFour();
        reloadData();
    });
    function reloadData() {
        document.getElementById("loading").style.display="";
        var param = Form.getParams($("#form"));
        param.batchId = "59";
        $.ajax({
            url: "#springUrl('/network/supply/response/getAllData')",
            data: param,
            type: "POST",
            success: function (text) {
                var d = JSON.parse(text);
                if (d.success && d.data) {
                    option = cost_bar_one.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.arr1,
                        }
                    ];
                    option.series[0].data = d.data.arr2;
                    cost_bar_one.setOption(option);

                    option = cost_bar_two.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.arr3,
                        }
                    ];
                    option.series[0].data = d.data.arr4;
                    cost_bar_two.setOption(option);

                    option = cost_bar_three.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.arr5,
                        }
                    ];
                    option.series[0].data = d.data.arr6;
                    cost_bar_four.setOption(option);

                    option = cost_bar_four.getOption();
                    option.xAxis = [
                        {
                            type: 'category',
                            data: d.data.arr7,
                        }
                    ];
                    option.series[0].data = d.data.arr8;
                    cost_bar_three.setOption(option);


                    document.getElementById("loading").style.display="none";
                }else{
                    document.getElementById("loading").style.display="none";
                    toastr.error(d.message);
                    var div1="<div type='text' style='padding-top:10%' class=' text-center '>"+d.message+"</div>";
                    $("#cost-bar-one").empty();
                    $("#cost-bar-one").prepend(div1);
                    $("#cost-bar-two").empty();
                    $("#cost-bar-two").prepend(div1);
                    $("#cost-bar-three").empty();
                    $("#cost-bar-three").prepend(div1);
                }
            }
        });
    }
</script>
